<template>
  <div class="map_box">
    <div id="map" class="chart_box"></div>
  </div>
</template>

<script>
import * as echarts from "echarts"

import xbehyq from '@/assets/geoJson/county-json/xbehyq.json'
import wsq from '@/assets/geoJson/county-json/wsq.json'

let userList = [
  { "id": 32, "nickName": "苏雅达来", "longitude": "108.611", "latitude": "38.0505" }, 
  { "id": 158, "nickName": "浩斯巴雅尔", "longitude": "108.6765284836292", "latitude": "38.26230866871854" }, 
  { "id": 36, "nickName": "敖云孟都","longitude": "109.244", "latitude": "38.9279" }, 
  { "id": 34, "nickName": "浩斯巴雅尔", "longitude": "109.243", "latitude": "38.9776" }, 
  { "id": 264, "nickName": "青克乐", "longitude": "108.58", "latitude": "38.3184" }, 
  { "id": 173, "nickName": "同嘎拉格", "longitude": "108.99", "latitude": "38.6529" }, 
  { "id": 268, "nickName": "阿拉腾达来", "longitude": "108.615", "latitude": "38.3812" }, 
  { "id": 42, "nickName": "哈斯额尔德木图", "longitude": "109.202", "latitude": "39.1121" }, 
  { "id": 266, "nickName": "那仁满都呼", "longitude": "108.58", "latitude": "38.3184" }, 
  { "id": 283, "nickName": "苏雅拉达来", "longitude": "109.367", "latitude": "39.1906" }, 
  { "id": 260, "nickName": "朝格吉勒", "longitude": " 108.741", "latitude": "38.7436" }, 
  { "id": 296, "nickName": "娜布其玛", "longitude": "108.62", "latitude": "38.7029" }, 
  { "id": 295,  "nickName": "嘎达苏", "longitude": "108.863", "latitude": "38.7338"}, 
  { "id": 38,  "nickName": "乌宁夫", "longitude": "108.642", "latitude": "38.6732" }, 
  { "id": 152,  "nickName": "照日格图", "longitude": "108.779", "latitude": "38.9601" }, 
  { "id": 293,  "nickName": "阿拉藤格日乐", "longitude": "108.533", "latitude": "38.7311" },
  { "id": 292,  "nickName": "乌日图那顺", "longitude": "108.888", "latitude": "38.4838" },
  { "id": 275, "nickName": "乌力吉", "longitude": "108.874", "latitude": "38.5015" }, 
  { "id": 291, "nickName": "布和巴雅尔", "longitude": "108.595", "latitude": "38.3533" }, 
  { "id": 290, "nickName": "莲花", "longitude": "108.878", "latitude": "38.4665" },
  { "id": 273, "nickName": "嘎拉藏", "longitude": "109.121", "latitude": "38.9561" }, 
  { "id": 30,  "nickName": "王世华", "longitude": "109.371", "latitude": "39.1902" }, 
  { "id": 289, "nickName": "胡雅图", "longitude": "109.214", "latitude": "38.747" }, 
  { "id": 288, "nickName": "宝音达来", "longitude": "109.164", "latitude": "38.8764" }, 
  { "id": 287, "nickName": "温都苏", "longitude": "109.171", "latitude": "38.8082" }, 
  { "id": 286, "nickName": "热瓦迪", "longitude": "109.063", "latitude": "39.256" },
  { "id": 285, "nickName": "宝音伊布格乐", "longitude": "108.633", "latitude": "38.6486" }, 
  { "id": 284, "nickName": "哈斯其劳", "longitude": "108.609", "latitude": "38.6532" }, 
  { "id": 157, "nickName": "青克乐", "longitude": "108.682", "latitude": "38.3909" }, 
  { "id": 267,  "nickName": "苏雅拉达来", "longitude": "108.671", "latitude": "38.2824" }, 
  { "id": 282,  "nickName": "斯庆格日乐", "longitude": "109.223", "latitude": "38.9808" }, 
  { "id": 281,  "nickName": "哈斯吉日嘎啦", "longitude": "108.951", "latitude": "38.8104" }, 
  { "id": 280,  "nickName": "乌力吉吉日嘎啦", "longitude": "108.801", "latitude": "38.9469" }, 
  { "id": 279,  "nickName": "吉古日图", "longitude": "108.671", "latitude": "38.2824" }, 
  { "id": 278, "nickName": "贡毕力格", "longitude": "108.583", "latitude": "39.1662" },
  { "id": 277, "nickName": "赛音脑日布", "longitude": "109.151", "latitude": "39.1578" }, 
  { "id": 159, "nickName": "布日古德", "longitude": null, "latitude": null }, 
  { "id": 276, "nickName": "朝格都仁", "longitude": "108.681", "latitude": "39.1228" }, 
  { "id": 251,  "nickName": "巴音都仁", "longitude": "108.948", "latitude": "38.4723" }, 
  { "id": 33, "nickName": "达尼斯", "longitude": "109.223", "latitude": "38.9808" }
]

export default {
  name: 'CountyMap',
  props: {
    countyName: String
  },
  data() {
    return {
      mapData: null,
    }
  },
  watch: {
    countyName: {
      handler(val) {
        if (val == '新巴尔虎右旗') {
          this.mapData = xbehyq
        } else if (val == '乌审旗') {
          this.mapData = wsq
        }

        this.initMap()
      },
      // immediate: true
    }
  },
  mounted() {

  },
  methods: {
    initMap() {
      let map = echarts.init(document.getElementById("map"));
      echarts.registerMap('countymap', this.mapData) //注册

      let that = this
      let options = {
        //backgroundColor: '#0F1C3C',
        tooltip: {
          trigger: "item",
          formatter: function (params) {
            if (params.value.length > 1) {
              return params.data.name + "" + params.data.value[2];
            } else {
              return params.name;
            }
          },
        },
        geo: {
          map: "countymap",
          show: true,
          roam: false,
          label: {
          },
          layoutSize: "80%",
          itemStyle: {
            areaColor: '#eee',
            shadowOffsetX: 9,
            shadowOffsetY: 9,
            shadowColor: "#eee",
            shadowBlur: 20,
          },
        },
        series: [
          {
            type: "map",
            map: "countymap",
            // aspectScale: 0.75,  //长宽比
            label: {
              //调整数值
              position: "right",
              show: true,
              color: "#fff",
              fontSize: 14,
            },

            itemStyle: {
              areaColor: 'rgb(86, 162, 227)',
              // 地图块颜色
              // areaColor: {
              //   x: 0,
              //   y: 0,
              //   x2: 0,
              //   y2: 1,
              //   colorStops: [
              //     {
              //       offset: 0,
              //       // color: "#073684", // 0% 处的颜色
              //       color: '#e4cfbb'
              //     },
              //     {
              //       offset: 1,
              //       // color: "#061E3D", // 100% 处的颜色
              //       color: '#e4cfbb'
              //     },
              //   ],
              // },
              borderColor: "#fff",
              borderWidth: 1,
              //鼠标放置颜色加深
              emphasis: {
                areaColor: '#eee',
                borderColor: '#888',
                borderWidth: 2,
                shadowBlur: 10,
                shadowColor: '#888',
              },
            },
            label: {
              show: true,
              textStyle: {
                fontSize: 14,
                color: '#efefef',
              },
              emphasis: {
                textStyle: {
                  color: '#000',
                },
              },
            },
            data: [],
          },
          {
            type: 'scatter',
            coordinateSystem: 'geo',
            symbol: 'pin',
            symbolSize: 20,
            itemStyle: {
              color: 'rgb(236, 58, 96)', //标志颜色
            },
            emphasis: {
              label: {
                show: true,
                color: 'rgb(236, 58, 96)',
                fontSize: 12,
                position: 'top',
                formatter(value) {
                  return `${value.name}`
                }
              },
            },
            // label: {
            //   show: true,
            //   color: '#fff',
            //   fontSize: 15,
            //   position: 'inside',
            //   formatter(value) {
            //     return `${value.name}`
            //   }
            // },
            data: that.countyName == '乌审旗' ? that.convertUserData(userList) : [],
            zlevel: 1,
            universalTransition: {
              enabled: true,
            }
          },
        ],
      }

      map.setOption(options)

      // 地图点击事件
      map.on('click', params => {
        console.log(params);
        if (params.componentSubType == 'scatter') {
          // 跳转到 示范点牧户大数据
          window.open(`https://dsj.dayaar.com.cn/wsq-farm/#/${params.data.userId}/${params.data.name}`)
        }

        if (params.componentSubType == 'map') {
          this.$emit('clickCountyMap', params.name)
        }
      });
    },

    // 试验户
    convertUserData(data) {
      let userPoint = [];
      for (var i = 0; i < data.length; i++) {
        userPoint.push({
          userId: data[i].id,
          name: data[i].nickName,
          value: [data[i].longitude, data[i].latitude, data[i].nickName],
        });
      }
      return userPoint;
    },

  }
}

</script>

<style>
.map_box {
  width: 100% !important;
  height: 100% !important;
}

.chart_box {
  width: 100% !important;
  height: 100% !important;
}

.s {
  color: rgb(236, 58, 96);
}
</style>